<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%--------------------------------------------------------------------------------%>
    <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="disk/slidercaptcha.min.css" rel="stylesheet"/>
    <%--------------------------------------------------------------------------------%>
    <script src="resource/JS/Register.js"></script>
    <link href="resource/CSS/Register.css" rel="stylesheet"/>
    <link rel="icon" href="resource/images/topimg.ico">
    <title>注册</title>
</head>

<body>
<img class="WeChat" src="resource/images/weChat.png">
<div class="rg_layout">
    <div class="rg_left">
        <p>欢迎注册微信</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_form">
        <form action="RegisterServer" id="form" method="post" onsubmit="return check_form(this)">
            <table>
                <tr>
                    <td class="td_left"><label for="username">QQ</label></td>
                    <td class="td_right">
                        <input type="text" name="username" id="username" placeholder="请输入绑定的QQ号码">
                        <span id="s_username" class="error"></span>
                    </td>
                </tr>

                <tr>
                    <td class="td_left"><label for="password">密码</label></td>
                    <td class="td_right">
                        <input type="password" name="password" id="password" placeholder="请输入8位及以上密码">
                        <span id="s_password" class="error"></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_left"><label for="name">昵称</label></td>
                    <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入昵称">
                        <span id="s_name" class="error"></span>
                    </td>
                </tr>

                <tr>
                    <td class="td_left"><label for="tel">手机</label></td>
                    <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号">
                        <span id="s_tel" class="error"></span>
                    </td>
                </tr>

                <tr>
                    <td class="td_left"><label>性别</label></td>
                    <td class="td_right">
                        <input type="radio" name="gender" value="1" checked> 男
                        <input type="radio" name="gender" value="0"> 女
                    </td>
                </tr>
                <tr>
                    <td class="td_left"><label for="birthday">出生日期</label></td>
                    <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
                        <span id="s_Startdate" class="error"></span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                </tr>
            </table>
        </form>
    </div>
    <div class="rg_right">
        <p>已有账号?<a href="Login.jsp">立即登录</a></p>
    </div>
</div>
<a href="" class="WeChatText">© 1998 - 2023 Tencent Inc. All Rights Reserved</a>

<!-- ---------------------------------验证码--------------------------------------------------- -->

<div class="go-top" id="IsPerson">
    <div class="slidercaptcha card">
        <div class="card-header">
            <span>请完成安全验证!</span>
        </div>
        <div class="card-body">
            <div id="captcha"></div>
        </div>
    </div>
</div>

<%-----------------------------------js---------------------------------------------%>
<script src="disk/longbow.slidercaptcha.min.js"></script>
<script>
    var captcha = sliderCaptcha({
        id: 'captcha',
        setSrc: function () {
            return 'https://picsum.photos/300/150/?image=' + Math.round(Math.random() * 136);
        },
        onSuccess: function () { //成功事件
            var handler = setTimeout(function () {
                window.clearTimeout(handler);
                alert("验证成功");
                IsPass = 1;
                // captcha.reset();
                var Is_Person = document.getElementById("IsPerson");
                Is_Person.style.visibility = 'hidden';
            }, 500);
        }
    });
</script>
<!-- -------------------------------------------------------------------------------->
</body>
</html>
